<template>
  <el-dialog :visible.sync="show" @opened="open" @close="close" :append-to-body="true" title="事件处理" width='70%' :close-on-press-escape="false" :close-on-click-modal="false">
    <div class="timeline-container" style="width: 12.5rem;">
      <!-- 上报工单历史记录 -->
      <template v-for="(item, index) in history">
        <div class="timeline-item" v-if="item.actNodeCode === 'defect_treatment_01'"  :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>上报内容</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">所属单位：</div><div class="content text-ellipsis">{{detail.deptName}}</div>
              </div>
              <div class="info-item">
                <div class="label">设施类型：</div><div class="content">{{detail.facilityTypeName}}</div>
              </div>
              <div class="info-item">
                <div class="label">处理方式：</div><div class="content">上报工单</div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <div class="label">位置描述：</div><div class="content text-ellipsis" :title="detail.locationDesc">{{detail.locationDesc}}</div>
              </div>
              <div class="info-item">
                <div class="label">设施编号：</div><div class="content">{{detail.facilityNo}}</div>
              </div>
              <div class="info-item">
                <div class="label">上报人：</div><div class="content">{{detail.createUserName}}</div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">隐患内容：</div><div class="content infoDiv">{{item.reportContent}}</div>
              </div>
            </div>
            <div class="info-row" v-if="item.reportImgs">
              <div class="image-box">
                <el-image
                  v-for="(img, idx) in item.reportImgs.split(',')"
                  class="img"
                  :key="idx"
                  :src="urlText+'/admin/sys-file/' + img"
                  :alt="img"
                  :preview-src-list="[urlText+'/admin/sys-file/' + img]"
                  :z-index="998"
                ></el-image>
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-item" v-if="item.actNodeCode === 'defect_treatment_02'"  :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>隐患审核</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
            <div v-if="item.handleResult === 1"  style="color:rgba(0, 255, 196, 1)">通过</div>
            <div v-if="item.handleResult === 2"  style="color:rgba(0, 255, 196, 1)">不通过</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">审核人员：</div><div class="content">{{item.auditUserName}}</div>
              </div>
              <div class="info-item" >
                <div class="flex-center" :class="{'active-color': item.handleWay === 1}" style="margin-right: 0.375rem;display:flex;align-items: center;"><i class="circle" :class="{'active': item.handleWay === 1}" style="margin-right: 0.075rem;"></i>本公司处理</div>
                <div class="flex-center" :class="{'active-color': item.handleWay === 2}" style="display:flex;align-items: center;"><i class="circle" :class="{'active': item.handleWay === 2}" style="margin-right: 0.075rem"></i> 第三方公司处理</div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">审核意见：</div><div class="content infoDiv">{{item.handleOpinion}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-item" v-if="item.actNodeCode === 'defect_treatment_03'" :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>处理工单</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">处理人员：</div><div class="content">{{item.auditUserName}}</div>
              </div>
              <div class="info-item">
                <div class="label">处理结果：</div>
                <div class="content">
                  <span v-if="item.handleResult === 3">已修复</span>
                  <span v-if="item.handleResult === 4">未修复</span>
                </div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">处理内容：</div><div class="content infoDiv">{{item.handleOpinion}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-item" v-if="item.actNodeCode === 'defect_treatment_04'"  :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>处理审核</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
            <div v-if="item.handleResult === 1" style="color:rgba(0, 255, 196, 1)">通过</div>
            <div v-if="item.handleResult === 2" style="color:rgba(0, 255, 196, 1)">不通过</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">审核人员：</div><div class="content">{{item.auditUserName}}</div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">处理审核：</div><div class="content infoDiv">{{item.handleOpinion}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-item" v-if="item.actNodeCode === 'wb_node_02'" :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>处理工单(维保人员)</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">处理人员：</div>
                <div class="content text-ellipsis">{{item.auditUserName}}</div>
              </div>
              <div class="info-item">
                <div class="label">处理结果：</div>
                <div class="content">
                  <span v-if="item.handleResult === 3">已修复</span>
                  <span v-if="item.handleResult === 4">未修复</span>
                </div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">处理内容：</div>
                <div class="content infoDiv">{{item.handleOpinion}}</div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 事件处理 -->
      <div class="timeline-item"  v-if="step === 1">
        <div class="item-title">
          <i class="circle active"></i>
          <div>上报内容</div>
        </div>
        <div class="info-box">
          <div class="info-row">
            <div class="info-item">
              <div class="label">所属单位：</div><div class="content text-ellipsis">{{detail.deptName}}</div>
            </div>
            <div class="info-item">
              <div class="label">设施类型：</div><div class="content">{{detail.facilityTypeName}}</div>
            </div>
            <div class="info-item">
              <div class="label">处理方式：</div><div class="content">上报工单</div>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <div class="label">位置描述：</div><div class="content text-ellipsis">{{detail.locationDesc}}</div>
            </div>
            <div class="info-item">
              <div class="label">设施编号：</div><div class="content">{{detail.facilityNo}}</div>
            </div>
            <div class="info-item">
              <div class="label">上报人：</div><div class="content">{{userInfo.realName}}</div>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item long">
              <div class="label start">隐患内容：</div>
              <el-input type="textarea" style="width: 87%;" size="mini" v-model="updateParams.reportContent" placeholder="请输入隐患内容" rows="4" maxlength="500" show-word-limit/>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item long">
              <div class="label" style="min-width: 1.125rem;">上传图片：</div>
              <el-upload
                action="/admin/sys-file/upload"
                list-type="picture-card"
                ref="imageUpload"
                :on-remove="imageRemove"
                :before-remove="beforeImageRemove"
                :before-upload="beforeImageUpload"
                :on-success="imageUploadSuccess">
                <i class="el-icon-picture-outline"></i>
              </el-upload>
            </div>
          </div>
          <div class="btn-row">
            <el-button :disabled="submitFlag" type="text" size="mini" @click="show = false">取消</el-button>
            <el-button type="primary" size="mini" :loading="submitFlag" @click="submit('ReportCommit')">提交</el-button>
          </div>
        </div>
      </div>
      <div class="timeline-item" v-if="step === 2">
        <div class="item-title">
          <i class="circle active"></i>
          <div>隐患审核</div>
        </div>
        <div class="info-box">
          <div class="info-row">
            <div class="info-item">
              <div class="label">审核人员：</div><div class="content">{{userInfo.realName}}</div>
            </div>
            <div class="info-item" style="width: auto;">
              <el-radio-group v-model="updateParams.handleWay">
                <el-radio :label="1">本公司处理</el-radio>
                <el-radio :label="2">第三方公司处理</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="info-row" v-if="updateParams.handleWay === 2" style="justify-content: flex-start;">
            <div class="label" style="width:1.5rem;">第三方维保单位：</div>
            <div class="content">
              <div class="el-input el-input--mini el-input--suffix" style="width: 3.75rem; cursor: pointer;"  @click="showRepairDeptDialog = true">
                <span class="el-input__inner" style="height: 100%; min-height: 0.35rem;">
                  <span v-if="updateParams.wbDeptId">{{updateParams.wbDeptName}}</span>
                  <span v-else class="placeholder">选择维保单位</span>
                </span>
                <span class="el-input__suffix"><i class="el-input__icon el-icon-search"></i></span>
              </div>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item long">
              <div class="label start">审核意见：</div>
              <el-input type="textarea" style="width: calc(100% - 80px);" size="mini" v-model="updateParams.opinion" placeholder="请输入审核意见" rows="4" maxlength="500" show-word-limit/>
            </div>
          </div>
          <div class="btn-row">
            <el-button :disabled="submitFlag" type="text" size="mini" @click="show = false">取消</el-button>
            <el-button :loading="submitFlag" plain size="mini" @click="submit('YhAuditNotPass')">不通过</el-button>
            <el-button :loading="submitFlag" type="primary" size="mini" @click="submit('YhAuditPass')">通过</el-button>
          </div>
        </div>
      </div>
      <div class="timeline-item" v-if="step === 3">
        <div class="item-title">
          <i class="circle active"></i>
          <div>处理工单</div>
        </div>
        <div class="info-box">
          <div class="info-row">
            <div class="info-item">
              <div class="label">处理人员：</div><div class="content">{{userInfo.realName}}</div>
            </div>
            <div class="info-item" style="width: 285px;">
              <div class="label start">处理结果：</div>
              <el-select size="mini" v-model="updateParams.handleResult" clearable placeholder="请选择处理结果">
                <el-option label="已修复" :value="3" />
                <el-option label="未修复" :value="4" />
              </el-select>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item long">
              <div class="label start">处理内容：</div>
              <el-input type="textarea" style="width: 87%;" size="mini" v-model="updateParams.opinion" placeholder="请输入处理内容" rows="4" maxlength="500" show-word-limit/>
            </div>
          </div>
          <div class="btn-row">
            <el-button :disabled="submitFlag" type="text" size="mini" @click="show = false">取消</el-button>
            <el-button type="primary" size="mini" :loading="submitFlag" @click="submit('HandleOrder')">提交</el-button>
          </div>
        </div>
      </div>
      <div class="timeline-item" v-if="step === 4">
        <div class="item-title">
          <i class="circle active"></i>
          <div>处理审核</div>
        </div>
        <div class="info-box">
          <div class="info-row">
            <div class="info-item">
              <div class="label">审核人员：</div><div class="content">{{userInfo.realName}}</div>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item long">
              <div class="label start">审核内容：</div>
              <el-input type="textarea" style="width: 87%;" size="mini" v-model="updateParams.opinion" placeholder="请输入审核内容" rows="4" maxlength="500" show-word-limit/>
            </div>
          </div>
          <div class="btn-row">
            <el-button :disabled="submitFlag" type="text" size="mini" @click="show = false">取消</el-button>
            <el-button :loading="submitFlag" plain size="mini" @click="submit('HandleAuditNotPass')">不通过</el-button>
            <el-button :loading="submitFlag" type="primary" size="mini" @click="submit('HandleAuditPass')">通过</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择维保单位 -->
    <select-repair-dept  :visible.sync="showRepairDeptDialog" @change="repairDeptChange"/>

  </el-dialog>
</template>

<script>
import SelectRepairDept from './components/SelectRepairDept/index.vue'
import danger from "@/api/monitor/hiddenDanger.js"


// 消防设施隐患事件处理
export default {
  name: 'facilitiesFailureHandle',
  components: {SelectRepairDept},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    step: {
      type: Number,
      default: 1
    },
    detail: {
      type: Object,
      default: function() {
        return {}
      }
    },
    history: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
   created(){
			this.userInfoGet()

      },
  data() {
    return {
      range: [
          { value: 3, text: "已修复" },
          { value: 4, text: "未修复" },
        ],
      userInfo:{},
      showRepairDeptDialog: false,
      imageList: [], // 图片列表
      submitMap: {
        'ReportCommit': danger.doReportCommit,             // 隐患上报
        'YhAuditPass':  danger.doYhAuditPass,               // 隐患审核-通过
        'YhAuditNotPass':  danger.doYhAuditNotPass,         // 隐患审核-不通过
        'HandleOrder':  danger.doHandleOrder,               // 处理工单
        'HandleAuditPass': danger.doHandleAuditPass,       // 处理审核-通过
        'HandleAuditNotPass': danger.doHandleAuditNotPass, // 处理审核-不通过
      },
      updateParams: {},
      submitFlag:false,
	  urlText:uni.getStorageSync('urlText')
    }
  },
  computed: {
    show: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
  },
  methods: {
    userInfoGet(){
    console.log(uni.getStorageSync('userInfo'));
    console.log(uni.getStorageSync('userDept'));
    this.userInfo=JSON.parse(uni.getStorageSync('user'))
    console.log(this.userInfo);
		},
    // 打开弹框，初始化数据
    open() {
      this.updateParams.id = this.detail.id
      if (this.step === 2) {
        this.$set(this.updateParams, 'handleWay', 1)
      }
      if (this.step === 3) {
        this.$set(this.updateParams, 'handleResult', 3)
      }
    },
    // 提交
    submit(type) {
      // 隐患上报上传图片
      if (type === 'ReportCommit') {
        this.updateParams.reportImgs = this.imageList.map(item => item.fileName).join(',')
        if (!this.updateParams.reportContent) {
          return this.$message.warning('请输入隐患内容！')
        }
      }else if (!this.updateParams.opinion) {
        let msg = '请输入处理内容！'
        if (this.step === 2) {
          msg = '请输入审核意见！'
        }
        if (this.step === 4) {
          msg = '请输入审核内容！'
        }
        return this.$message.warning(msg)
      }

      // 根据不同步骤，请求不同的接口
      const handle = this.submitMap[type]

      if (this.updateParams.handleWay === 2 && !this.updateParams.wbDeptId) {
        return this.$message.warning('请选择维保单位！')
      }
      this.submitFlag=true
      handle(this.updateParams).then(res => {
        if(res.code==0){
         this.$message.success('操作成功！')
         this.show = false
        this.$emit('success')
        }else{
           this.$message.error(res.msg)
        }

        this.submitFlag=false

      }).catch(() => this.submitFlag=false)
    },
    // 弹框关闭
    close() {
      this.updateParams = {}
    },
    // 监听维保单位选择
    repairDeptChange(val) {
      this.updateParams.wbDeptId = val.deptId
      this.updateParams.wbDeptName = val.name
    },
    // 图片上传之前
    beforeImageUpload(file) {
      const types = ['image/jpg', 'image/jpeg', 'image/png', 'image/bmp']
      if (this.imageList.length >= 9) {
        this.$message.error('图片数量不能超过9张!')
        return false
      }
      if(!types.includes(file.type)) {
        this.$message.error('图片格式只能是 .jpg、.jpeg、.png、.bmp !');
        return false
      }
      if((file.size / 1024 / 1024) > 10) {
        this.$message.error('图片大小不能超过 10 M!')
        return false
      }
    },
    // 图片上传成功
    imageUploadSuccess(res, file, fileList) {
      if (res.code == 0) {
        this.imageUrl = '/admin/sys-file/' + res.data.fileName
        this.imageList.push({
          fileName: res.data.fileName,
          original: res.data.original
        })
        this.$message.success('图片上传成功!')
      } else {
        this.imageUrl = ''
        this.$refs['imageUpload'].clearFiles()
        this.$message.error(res.msg)
      }
    },
    // 移除图片之前
    beforeImageRemove(file) {
      if (file && file.status === 'success') {
        return this.$confirm(`确定移除 ${ file.name }？`, '移除图片', {type: 'warning'})
      }
    },
    // 移除图片
    imageRemove(file) {
      if (file && file.status === 'success') {
        this.imageList = this.imageList.filter(item => item.original !== file.name)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.info-item{
  .label{
   color: #B8BDC1 !important;
  }
}
.content{
   color: rgba(255, 255, 255,0.9);
}

</style>
